<template>
  <div class="user-wrapper">
    <div class="content-box">
      <a-dropdown>
        <span class="action ant-dropdown-link user-dropdown-menu">
          <a-avatar class="avatar" size="small" :src="avatar" />
          <span class="nickname">{{ nickname }}</span>
        </span>
        <template #overlay>
          <a-menu class="user-dropdown-menu-wrapper">
            <a-menu-item key="0" @click="$refs.updateMine.open()">
              <a>
                <s-icon type="user-outlined" />
                <span>{{ $t('tools.userMenu.accountSetting') }}</span>
              </a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="1" @click="$refs.updatePassword.open()">
              <a>
                <s-icon type="lock-outlined" />
                <span>{{ $t('tools.userMenu.changePassword') }}</span>
              </a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="2" @click="refresh">
              <a>
                <s-icon type="redo-outlined" />
                <span>{{ $t('tools.userMenu.refresh') }}</span>
              </a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="4" @click="showSystemSetting">
              <a>
                <s-icon type="setting-outlined" />
                <span>{{ $t('tools.userMenu.systemConfig') }}</span>
              </a>
            </a-menu-item>
            <a-menu-divider />
            <a-menu-item key="3">
              <a href="javascript:;" @click="handleLogout">
                <s-icon type="logout-outlined" />
                <!-- <span>{{ $t('tools.userMenu.logout') }}</span> -->
              </a>
            </a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <span style="
          overflow: hidden;
          display: inline-block;
          width: 30px;
          text-align: center;
          cursor: pointer;
        " class="action ant-dropdown-link user-dropdown-menu ant-dropdown-trigger" @click="goHome">
        <s-icon type="home-outlined" />
      </span>
      <span style="overflow: hidden; display: inline-block">
        <select-lang :class="theme" class="action" />
      </span>
    </div>
    <update-password ref="updatePassword" />
    <update-mine ref="updateMine" @success="userInfoChange" />
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { USER_INFO } from '@/store/mutation-types'
import { Modal } from 'ant-design-vue'
import UpdatePassword from '@/pages/user/updatePassword/index.vue'
import UpdateMine from '@/pages/user/updateMine/index.vue'
import { useI18n } from 'vue-i18n'
import { useStore } from 'vuex'
import SelectLang from '@/components/SelectLang'
import ls from '@/utils/Storage'
import { useRouter } from 'vue-router'
import { clearUserInfo } from '@/utils/util'
import { loginSuccess } from '@/pages/user/helper'
import { getCurrentInstance } from 'vue'
import { MENU_CHANGE } from '../../../store/mutation-types'
import { currentApp } from '@/store/useSiteSettings'
export default defineComponent({
  name: 'UserMenu',
  components: { UpdatePassword, UpdateMine, SelectLang },
  props: ['theme'],
  setup(props) {
    const context = getCurrentInstance()?.appContext.config.globalProperties
    const { t } = useI18n()
    const router = useRouter()
    const UserInfo = ls.get(USER_INFO)
    const avatar = ref(UserInfo.headPortrait)
    const nickName = ref(UserInfo.nickName)
    const store = useStore()
    const goHome = () => {
      router.push('/')
    }
    const handleLogout = () => {
      Modal.confirm({
        title: t('tools.userMenu.tip'),
        content: t('tools.userMenu.checkLogout'),
        onOk: () => {
          context.$api
            .POST('/realm/session/logout')
            .then((res) => {
              clearUserInfo()
              router.push({ path: '/user/login' })
            })
            .catch((e) => {
              clearUserInfo()
              router.push({ path: '/user/login' })
            })
        }
      })
    }
    const showSystemSetting = () => {
      store.commit('SET_SETTING_DRAWER', true)
    }

    const onLockScreen = () => {
      store.commit('SET_LOCK_SCREEN', true)
    }
    const refresh = () => {
      loginSuccess(null, router).then(() => {
        router.push({ path: '/' })
        store.commit(MENU_CHANGE)
      })
    }
    const userInfoChange = () => {
      let info = ls.get(USER_INFO)
      avatar.value = info.headPortrait
      nickName.value = info.nickName
    }
    return {
      goHome,
      refresh,
      avatar: avatar,
      nickname: nickName,
      handleLogout,
      showSystemSetting,
      onLockScreen,
      userInfoChange
    }
  }
})
</script>
<style lang="less">
.user-dropdown-menu-wrapper {
  .ant-dropdown-menu-item {
    width: 100% !important;
  }
}
</style>
